<template>
    <div class="bg">
        <div class="header">
            <div class="title">数据大屏可视化</div>
            <div class="time">当前时间：{{ noDate }}</div>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <!-- 左侧 -->
            <div class="left">
                <div class="item">
                    <div class="title">饼图</div>
                    <PieChart :option="pirChartOption" />
                    <div class="panel-footer"></div>
                </div>
                <div class="item">
                    <div class="title">折线图</div>
                    <LineChart :option="lineChartOption" />
                    <div class="panel-footer"></div>
                </div>
                <div class="item">
                    <div class="title">柱状图1</div>
                    <Histogram />
                    <div class="panel-footer"></div>
                </div>
            </div>
            <!-- 地图部分 -->
            <div class="center">

            </div>
            <!-- 右侧 -->
            <div class="right">
                <div class="item">
                    <div class="title">柱状图1</div>
                    <TransverseHistogram/>
                    <div class="panel-footer"></div>
                </div>
                <div class="item">
                    <div class="title">柱状图1</div>
                    <div class="panel-footer"></div>
                </div>
                <div class="item">
                    <div class="title">柱状图1</div>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, } from "vue"
import PirChartOption from "@/components/Charts/PieChart/option"
import LineChartOption from "@/components/Charts/LineChart/option"
import HistogramOption from "@/components/Charts/Histogram/option"
import { getNowDate } from "@/utils/utils.ts"
import PieChart from "@/components/Charts/PieChart/index.vue";
import LineChart from "@/components/Charts/LineChart/index.vue";
import Histogram from "@/components/Charts/Histogram/index.vue";
import TransverseHistogram from "@/components/Charts/TransverseHistogram/index.vue";
let noDate = ref("")
setInterval(function () {
    noDate.value = getNowDate()
}, 1000);
console.log();
let pirChartOption = PirChartOption()
let lineChartOption = LineChartOption()
let histogramOption = HistogramOption()
</script>
<style scoped lang="scss">
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
//默认设计稿的宽度
$designWidth: 1920;
//默认设计稿的高度
$designHeight: 1080;



//px转为vw的函数
@function vw($px) {
    @return math.div($px , $designWidth) * 100vw;
}

//px转为vh的函数
@function vh($px) {
    @return math.div($px , $designHeight) * 100vh;
}

/* 
     直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位		 
     */
* {
    padding: 0;
    margin: 0
}

.bg {
    width: vw(1920);
    height: vh(1080);
    font-size: vh(16);
    background-image: url("@/assets/images/bigData/bj.jpg");
    background-size: 100% 100%;
}

.header {
    height: vh(100);
    width: vw(1920);
    background-size: 100% 100%;
    background-image: url("@/assets/images/bigData/head_bg.png");
    position: relative;

    .title {
        text-align: center;
        color: #fff;
        line-height: vh(90);
        font-size: vh(38);
        letter-spacing: vw(10);
        font-weight: 700;
    }

    .time {
        color: #fff;
        position: absolute;
        right: vw(50);
        top: vh(20);
        font-size: vh(19);
    }
}

.content {
    padding: vh(20);
    display: flex;
    justify-content: space-between;
    height: vh(1080 - 140);

    .center {
        width: vw((1920 - 400*2) - 50);
    }

    .left,
    .right {
        height: 100%;
        width: vw(400);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item {
            height: 33%;
            width: 100%;
            position: relative;
            box-sizing: border-box;
            padding: vw(20);
            background-size: 100% 100%;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background-image: url("@/assets/images/bigData/line.png") rgba(255, 255, 255, 0.03);
            ;

            .title {
                color: #fff;
                text-align: center;
                font-size: vw(18);
            }

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
                content: "";
            }

            &::after {
                position: absolute;
                top: 0;
                right: 0;
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
                content: "";
            }

            .panel-footer {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;

                &::before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                    content: "";
                }

                &::after {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                    content: "";
                }
            }
        }
    }
}
</style>